<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    按钮-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button type="success" @click="uploadVideo()">上传视频</el-button>
          <el-button @click="takeDown()" :disabled="takeDownDisabled">下架</el-button>
          <el-button @click="remove()" :disabled="removeDisabled">删除</el-button>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table
            :data="data"
            v-loading="loading"
            stripe
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="duration" label="视频时长(s)" align="center"></el-table-column>
            <el-table-column prop="source" label="视频来源" align="center"></el-table-column>
            <el-table-column prop="creationTime" label="视频上传时间" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" align="center"></el-table-column>
            <el-table-column prop="praiseQuantity" label="点赞数" align="center"></el-table-column>
            <el-table-column prop="commentsQuantity" label="评论数" align="center"></el-table-column>
            <el-table-column prop="viewerQuantity" label="浏览数" align="center"></el-table-column>
            <el-table-column prop="statusValue" label="状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center" width="180">
              <template slot-scope="scope">
                <!--已发布-->
                <div v-if="scope.row.statusValue == '已发布'">
                  <el-button @click.stop="takeDown(scope.row.id)" type="text">下架</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已禁用-->
                <div v-if="scope.row.statusValue == '已禁用'" >
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!--上传视频对话框-->
    <upload @close="closeUpload" :id-list="idList" :is-upload="isUpload"></upload>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import Upload from '@/framework/components/dialog/short-video/draft/upload'
import PageMixin from '@/framework/mixins/pageMixin'
import Normalize from '@/framework/mixins/normalize'
import {findWithMe,countWithMe,batchDeleted,batchRemove} from '@/project/service/video'

export default {
  name: "list",
  mixins: [
    PageMixin,
    // Normalize(search, count)
  ],
  data(){
    return{
      searchItems: [
        {name: '标题', key: 'title', type: 'string'},
        {name: '状态', key: 'status', type: 'select',
          displayValue: [ '已发布', '已禁用'],
          value:{0:'published' , 1:'disabled'}},
      ],
      data:[
        // {title:'纺织',videoTime:'15',videoSource:'上传',uploadTime:'2022-01-07 10:00',releaseTime:'2022-01-07 12:00',giveALike:'154847',commentNum:'98612',browseNum:'264879',state:'已发布'},
        // {title:'现代纺织业',videoTime:'22',videoSource:'拍摄',uploadTime:'2022-01-03 12:00',releaseTime:'2022-01-04 10:00',giveALike:'2654879',commentNum:'368792',browseNum:'6548795',state:'已禁用'},
        // {title:'布料讲解',videoTime:'32',videoSource:'上传',uploadTime:'2022-01-02 12:00',releaseTime:'2022-01-02 13:00',giveALike:'485168',commentNum:'59875',browseNum:'615482',state:'已发布'},
      ],
      isUpload: false,
      idList:[],
      takeDownDisabled:true,//是否禁用下架按钮
      removeDisabled:true,//是否禁用删除按钮
      loading: true,
    }
  },
  components: { Search, Upload },
  created(){
    this.listUpdate()
  },
  methods:{
    //查询短视频列表
    search(obj,type){
      findWithMe(obj,data => {
        data.forEach(item => {
          item.id = item.id.toString()
          if(item.status == 'published') {
            item.statusValue = '已发布'
          }else if(item.status == 'disabled'){
            item.statusValue = '已禁用'
          }
        })
        console.log(data)
        this.data = data
        this.loading = false
        if(type=='search'){
          this.$message.success('查询成功')
        }
      })
    },
    //统计短视频数量
    getCount(title,status){
      //条件搜索
      if(title || status){
        countWithMe({video:{title, status,publish:true}}, data => {
          this.total = data
        })
      }else{
        countWithMe({video:{publish:true}}, data => {
          this.total = data
        })
      }
    },
    //短视频列表更新
    listUpdate(){
      let listParam = {
        video:{publish: true},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount('','')
    },
    //条件搜索
    searchBySearchItem(res){
      this.loading = true
      console.log(res)
      let param = {
        video:{title: res.title,status: res.status,publish:true},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      // console.log('传参')
      // console.log(param)
      this.search(param,'search')
      this.getCount(res.title,res.status)
    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let idList = []
      let stateList=[]
      if(row.length == 0){
        this.removeDisabled = true
        this.takeDownDisabled = true
      }else{
        this.removeDisabled = false
        row.forEach(item=> {
          //判断下架按钮是否可用，若存在选择行状态为已发布则可用
          let p = new Promise((resolve,reject) => {
            if(item.statusValue == '已发布') {
              resolve()
            } else {
              reject()
            }
          })
          stateList.push(p)
          idList.push(item.id)
        })
        //当stateList中的promise对象全为成功状态时发布按钮可用，返回成功状态的promise
        Promise.all(stateList).then(val => {
          this.takeDownDisabled = false
        },err => {
          this.takeDownDisabled = true
        })
        //获取id数组
        this.idList = idList
      }
    },
    //上传视频
    uploadVideo(){
      this.idList = []
      this.isUpload = true
    },
    //关闭上传视频对话框
    closeUpload(isUpdate){
      this.isUpload = false
      if(isUpdate){
        this.listUpdate()
      }
    },
    //下架
    takeDown(id){
      this.$confirm('确定下架选中视频？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)
        batchRemove({idList:this.idList},data => {
          console.log(data)
          if(data == '204'){
            this.$message({
              type: 'success',
              message: '下架成功'
            });
            this.listUpdate()
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //查看
    view(id){
      this.$router.push({path:'/video/published/show/'+ id})
    },
    //删除
    remove(id){
      this.$confirm('删除后不可恢复，是否确定删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)
        batchDeleted({idList: this.idList},data => {
          if(data == '204'){
            this.$message.success('删除成功')
            this.listUpdate()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
}
</script>

<style lang="less" scoped>
.pager-group {
  width: 100%;
  margin: 20px 0;
}
</style>
